<!DOCTYPE html>
<html lang="zh" xmlns:th="http://www.thymeleaf.org">
<head>
  <th:block th:include="include :: header('新增品牌')"/>
  <th:block th:include="include :: jasny-bootstrap-css"/>
  <th:block th:include="include :: cropbox-css"/>
  <th:block th:include="include :: summernote-css"/>
</head>
<body class="white-bg">
<div class="wrapper wrapper-content animated fadeInRight ibox-content">
  <form class="form-horizontal m" id="form-brand-add">
    <div class="form-group">
      <label class="col-sm-3 control-label">品牌名称：</label>
      <div class="col-sm-8">
        <input name="brandName" class="form-control" type="text" required>
      </div>
    </div>
    <div class="form-group">
      <label class="col-sm-3 control-label">显示顺序：</label>
      <div class="col-sm-8">
        <input name="orderNum" class="form-control" type="text" required>
      </div>
    </div>
    <div class="form-group">
      <label class="col-sm-3 control-label">品牌状态：</label>
      <div class="col-sm-8">
        <div class="radio-box" th:each="dict : ${@dict.getType('pro_brand_status')}">
          <input type="radio" th:id="${'status_' + dict.dictCode}" name="status" th:value="${dict.dictValue}" th:checked="${dict.default}">
          <label th:for="${'status_' + dict.dictCode}" th:text="${dict.dictLabel}"></label>
        </div>
      </div>
    </div>
    <div class="form-group">
      <label class="col-sm-3 control-label">LOGO：</label>
      <div class="col-sm-8">
        <div class="fileinput fileinput-new" data-provides="fileinput">
          <div class="fileinput-new thumbnail" style="width: 140px; height: 140px;">
            <img id="imageBox">
          </div>
          <div class="fileinput-preview fileinput-exists thumbnail" style="max-width: 200px; max-height: 150px;"></div>
          <div>
            <span class="btn btn-white btn-file">
              <span class="fileinput-new">选择图片</span>
              <span class="fileinput-exists">更改</span>
              <input type="file" class="" name="logo" id="logo" accept="image/*" required/>
            </span>
          </div>
        </div>
      </div>
    </div>
    <div class="form-group">
      <label class="col-sm-3 control-label">品牌介绍：</label>
      <div class="col-sm-8">
        <div class="introduce">
        </div>
      </div>
    </div>
    <div class="form-group">
      <label class="col-sm-3 control-label">说明：</label>
      <div class="col-sm-8">
        <textarea id="remark" name="remark" class="form-control"></textarea>
      </div>
    </div>
  </form>
</div>
<th:block th:include="include :: footer"/>
<th:block th:include="include :: jasny-bootstrap-js"/>
<th:block th:include="include :: cropbox-js"/>
<th:block th:include="include :: summernote-js"/>
<script type="text/javascript">
  $(window).load(function () {
    $('#logo').on('change', function () {
      var reader = new FileReader();
      reader.onload = function (e) {
        //根据MIME判断上传的文件是不是图片类型
        if ((e.target.result).indexOf("image/") == -1) {
          $.modal.alertWarning("文件格式错误，请上传图片类型,如：JPG，PNG后缀的文件。");
        }
      }
      reader.readAsDataURL(this.files[0]);
    })
  });

  var prefix = ctx + "product/brand";
  $("#form-brand-add").validate({
    focusCleanup: true
  });

  $(document).ready(function () {
    $('.introduce').summernote({
      lang: 'zh-CN',
      height: 300,         // set editor height
      callbacks: {
        onImageUpload: function (files) {
          updateFile(files[0]);
        }
      }
    });
  });

  function updateFile(file) {
    var fileData = new FormData();
    fileData.append("file", file);

    $.ajax({
      url: "/common/upload",
      data: fileData,
      type: "post",
      contentType: false,
      processData: false,
      success: function (result) {
        if (result.code == web_status.SUCCESS) {
          var url = result.url;
          $('.introduce').summernote('insertImage', url, 'image name');
        } else if (result.code == web_status.WARNING) {
          $.modal.alertWarning(result.msg)
        } else {
          $.modal.alertError(result.msg);
        }
      }
    });
  }

  function submitHandler() {
    if ($.validate.form()) {

      let formdata = new FormData();
      formdata.append("brandName", $("input[name='brandName']").val());
      formdata.append("orderNum", $("input[name='orderNum']").val());
      formdata.append("status", $("input[name='status']:checked").val());
      formdata.append("introduce", $('.introduce').summernote('code'));
      formdata.append("remark", $("#remark").val());
      formdata.append("file", $("#logo").get(0).files[0]);

      $.ajax({
        url: prefix + "/add",
        data: formdata,
        type: "post",
        processData: false,
        contentType: false,
        success: function (result) {
          $.operate.saveSuccess(result);
        }
      })
    }
  }
</script>
</body>
</html>